<template>
  <div>
    <!-- 头部 -->
    <div class="header">
        <div class="content header-content">
            <!-- 左边返回箭头 -->
           <div class="back-arrows">
                <img src="yangchaung/images/jt.png" alt="" @click="funs">
            </div> 
            <div class="header-title">
                <h3>提交订单</h3>
            </div>
            <div ></div>
        </div>
    </div>
    <!-- 名称价格 -->
    <div class="name-price">
        <div class="content npcontent">
            <div class="text">
                {{this.$route.query.id}}
            </div>
            <div class="money" >
                ￥<span ref="moneys">{{this.$route.query.title}} </span>
            </div>
        </div>
    </div>
    <!-- 数量 -->
    <!-- 复用 -->
    <div class="general">
        <div class="content">
            <div class="left">
                数量
            </div>
            <div class="right">
                <van-stepper v-model="value" @plus="count()" @minus="minus()" />
            </div>
        </div>
    </div>
    <van-divider />
    <!-- 小计 -->
     <div class="general">
        <div class="content">
            <div class="left">
                小计
            </div>
            <div class="right">
                ￥<span ref="total">{{this.$refs.total}}</span>
            </div>
        </div>
    </div>
    <van-divider />
    <!-- 复用的分隔框 -->
    <div class="divide">
    </div>
    <!-- 加载 -->
    <van-divider />
    <van-loading size="6.4vw">加载中...</van-loading>
    <!-- 抵用券 -->
      <div class="general">
        <div class="content">
            <div class="left">
                抵用券
            </div>
            <div class="right">
                1张可用>
            </div>
        </div>
    </div>
    <van-divider />
    <!-- 订单合计 -->
      <div class="general">
        <div class="content">
            <div class="left" >
                订单合计
            </div>
            <div class="right" style="color:#f64f1a">
                ￥{{this.$refs.total}}
            </div>
        </div>
    </div>
    <van-divider />
    <div class="divide">
    </div>
     <!-- 手机号 -->
      <div class="general">
        <div class="content">
            <div class="left">
                手机号
            </div>
            <div class="right">
                139****5628
            </div>
        </div>
    </div>
    <van-divider />
    <div class="divide">
    </div>
     <!-- 购买须知 -->
      <div class="general">
        <div class="content">
            <div class="left">
                购买须知
            </div>
        </div>
    </div>
    <van-divider />
    <div  class="content content-warn">
        <ul class="warn">
            <li>预约须知：请您提前一小时预约</li>
            <li>退款规则：随时退、过期退</li>
            <li>为保护未成年人健康成长，未成年用户请得到监护人知悉统一后再进行购买和体验，请勿购买不适合自身年龄段的产品</li>
        </ul>
    </div>
    <div class="bottom">
        <div class="bottom-total ">
            <div class="content">
                <div class="text">
                    <span class="symbol">￥</span>
                    <span class="price">{{this.$refs.total}}</span>
                </div>
                <button >普通支付</button>
            </div>
            
        </div>
    </div>
 
            <!-- 订单合计 -->
            <!-- <van-submit-bar  :price="3" button-text="提交订单" :decimal-length='0' label=" " text-align="left"  /> -->
            
    




     
  </div>
</template>

<style lang="scss" scoped>

    .content{
        width: 93.067vw;
        height: 100%;
        margin: auto;
        justify-content: space-between;
        display: flex;
    }
    .all{
        height: 100%;
        width: 100vw;
    }
    //头部
    .header{
        font-size: 4.267vw;
        height: 10.133vw;
        .header-content{
            height: 10.133vw;
            img{
                width:6.4vw ;
            }
        }
    }
    //名称价格
    .name-price{
        height: 16vw;
        background: #f0f0f0;
        .npcontent{
            .text{
                margin: auto;
            }
            .money{
                margin: auto;
            }
        }
    }
    //数量
    .general{
        height: 13.333vw;
        .left{
            margin: auto 0;  
        }
        .right{
            margin: auto 0;
        }
    }
    ::v-deep .van-divider{
        margin: 0;
    }
    //复用的分隔框
    .divide{
        background: #e6e6e8;
        width: 100vw;
        height: 2.667vw;
    }
    //购买须知的内容
    .content-warn{
        height: 20.733vw ;
        .warn{
            color: #8e8e8e;
            font-size: 3.2vw;
            height: 17.4vw;
            margin: auto 0;
        }
    }
        
    .bottom{
        height: 35.2vw;
        background: #e6e6e8;
        width: 100vw;
    }
    ::v-deep  .van-stepper__plus{
        color:#f5521a;
        border: 1px solid #f5521a;
        border-radius:0
    }
  
   ::v-deep .van-stepper__minus{
         color:#f5521a;
        border: 1px solid #f5521a;
        border-radius:0
    }
    ::v-deep .van-stepper__minus--disabled{
        color: #c8c9cc;
        border: 1px solid #cacaca;
    }

    .bottom-total{
        width: 100vw;
        position: fixed;
        left: 0;
        bottom: 0;
        height: 15.2vw;
        background: #fff;
        .text{
            margin-top: 5.333vw;
            color: #f64f1a;
            .price{
                font-size: 7.533vw;
            }
        }
        button{
            width: 33.333vw;
            height: 10.667vw;
            border-radius: 4.8vw;
            color: #fff;
            background: #fe6634;
            border:1px solid #dd8560;
            margin-top: 2.667vw; 
        }
    }

    ::v-deep .van-loading{
        display: none;
        background:#e6e6e8 ;
        color: rgb(246, 79, 26);
        text-align: center;
        height: 13.333vw;
        line-height:  13.333vw;;
    }

</style>

<script>

export default {
   
   data(){
        return {
            value: 1,
        }
    },

    beforeMount(){
        console.log(this.$route.query.id);
        this.$refs.total=this.$route.query.title
        console.log(this.$refs.total)
    },
   
    methods: {
         funs(){
            this.$router.go(-1)
        },
        //加
        count(){
            // 数量
           let inp= document.querySelector(".van-stepper__input")
           //加载中
           let load=document.querySelector('.van-loading')
           load.style.display="block"
           setTimeout(function(){
                 load.style.display="none"
           },400)
          
            //小计=数量*商品价格
           this.$refs.total=(inp.value*1+1)*this.$route.query.title
           console.log(this.$refs.total)
           console.log(inp)
           return this.$refs.total
          
        },
        // 减
        minus(){
            // 数量
           let inp= document.querySelector(".van-stepper__input")
           let load=document.querySelector('.van-loading')
           load.style.display="block"
           setTimeout(function(){
                 load.style.display="none"
           },400)
            //小计=数量*商品价格
           this.$refs.total=(inp.value*1-1)*this.$route.query.title
           console.log(this.$refs.total)
           console.log(inp)
           return this.$refs.total

           
        }

    },
   
}
 
</script>

